<template>
  <Popper class="light" arrow :placement="props.placement">
    <div class="thumb"><slot></slot></div>
    <template #content="{ close }">
      <div class="message">
        <img class="warn-icon" :src="publicUrl(`/images/warning.png`)" /><span
          >{{props.title}}</span
        >
      </div>
      <div class="popconfirm-button">
        <span class="thumb cancel" @click="close">取消</span>
        <Button
          v-model:loading="loading"
          class="confirm thumb"
          :size="`0.0625rem`"
          :background="`#3644bf`"
          v-debounce="() => confirm(close)"
          >确认</Button
        >
      </div>
    </template>
  </Popper>
</template>
<script setup lang="ts" name="Popconfirm">
import { ref, watch } from "vue";
import Popper from "vue3-popper";
import { publicUrl } from "@/utils/util";
import Button from "@/components/Button/index.vue";
const emits = defineEmits<{
  (event: "confirm",close:()=>{}): void;
}>();
interface Props {
  loading?: boolean;  //是否加载中
  title?:string;      //标题
  placement?:           //气泡确认框往哪边显示
    | "auto"
    | "auto-start"
    | "auto-end"
    | "top"
    | "top-start"
    | "top-end"
    | "bottom"
    | "bottom-start"
    | "bottom-end"
    | "right"
    | "right-start"
    | "right-end"
    | "left"
    | "left-start"
    | "left-end";
}
const props = withDefaults(defineProps<Props>(), {
  loading: false,
  title:'确定要删除吗?',
  placement: "bottom-start",
});
const loading = ref<boolean>(props.loading);
watch(()=>props.loading, (newValue:boolean) => {
  loading.value = newValue;
});
const confirm = (close: ()=>{}) => {
  emits("confirm",close);
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
